<template>
	<view class="topView" :style="{'top':' '+topGap+' '}">
		<view class="headLine">
			<view class="name">
				<text class="md2Title">职位</text>
				<text class="md2Text mgrey">{{ num }}</text>
			</view>
			<input type="text" value="" @focus="showTopView"/>
			<view class="search"><image src="../../../static/imgs/detail/search.png" mode=""></image></view>
		</view>
		
		<view class="types">
			<view class="typeItem md4Text" v-for="(type, typeIndex) in chooses" :key="typeIndex" :class="typeIndex == ins?'choosed':''"
			@click="getCurrentType(typeIndex)">{{ type }}</view>
		</view>
		
		<view class="content">
			<job-list></job-list>
		</view>
	</view>

	
</template>

<script>
	import jobList from '../home/jobList.vue';
export default {
	data() {
		return {
			num: '33',
			chooses: ['全部', '技术', '设计'],
			topGap:'calc(100vh - 190upx)',
			ins:0
		};
	},
	
	components:{
	jobList	
	},
	methods: {
		showTopView(){
			this.topGap = '88upx';
		},
		getCurrentType(Index){
			this.ins = Index;
		}
		
	}
};
</script>

<style scoped lang="less">
.topView {
	width: 100vw;
	height: 100vh;
	position: fixed;
	// top: calc(100vh - 180upx);
	color: #333;
	background-color: #fff;
	border-radius: 66upx 66upx 0px 0px;
	left: 0;
	padding: 0 30upx;
}
.headLine {
	width: 100%;
	padding: 42upx 30upx 20upx 30upx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2upx solid #e5e5e5;
	.name {
		text {
			&:nth-child(1) {
				font-weight: bold;
				padding-right: 10upx;
			}

			&:nth-child(1) {
				font-weight: bold;
			}
		}
	}
	.search {
		image {
			width: 40upx;
			height: 40upx;
		}
	}
}

.types{
	display: flex;
	padding: 15upx 0;
	.typeItem{
		width: 104upx;
		height: 56upx;
		background: #FFFFFF;
		border: 2upx solid #CCCCCC;
		opacity: 1;
		text-align: center;
		line-height: 56upx;
		border-radius: 66upx;
		margin-right:34upx;
		
	}
	.choosed{
		border: 2upx solid #3465B1;
		color: #3465B1;
	}
}

.content{
	height: calc(100% - 197upx);
	overflow: auto;
}
</style>
